<template>
  <div>
    <h1 align="center">用户列表</h1>

    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">
          <el-input placeholder="请输入搜索内容">

          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">点击</el-button>
        </el-col>
      </el-row>
<!--      用户列表 stripe 隔行变色-->
      <el-table :data="userList" border stripe>
<!--        索引列-->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="角色" prop="role"></el-table-column>
        <el-table-column label="状态" prop="state">
          <!--        作用域插槽-->
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" >
          <template slot-scope="scope">
<!--            修改-->
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<!--            删除-->
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
<!--            权限-->
            <el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false">
              <el-button type="waring" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
export default {
  created() {
    this.getUserList();
  },
  data() {
    return {
      //查询实体
      queryInfo: {
        pageNum: 1,// 当前页
        pageSize: 5,//每页最大数
      },
      userList: [], //用户列表
      total: 0, // 总记录数
    }
  },
  methods: {
    //获取所有用户
    getUserList(){
      axios.get('/alluser').then(res=>{
        this.userList = res.data;
        this.total = res.numbers;
      })
    }
  }
}
</script>

<style scoped>

</style>